<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/template-web.js"></script>
    <script src="js/ajax.js"></script>
    <style>
        .container {
            padding-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 显示在一行 -->
        <div class="form-inline">
            <!-- 省 -->
            <div class="form-group">
                <select class="form-control" id="provinces">
                    <option>请选择省份</option>
                </select>
            </div>
            <!-- 市 -->
            <div class="form-group">
                <select class="form-control" id="citys">
                    <option>请选择城市</option>
                </select>
            </div>
            <!-- 区/县 -->
            <div class="form-group">
                <select class="form-control" id="areas">
                    <option>请选择区/县</option>
                </select>
            </div>
        </div>
    </div>
    <!-- 
        省份的模板 
        provinces = [
            {
                "id":"100",
                "name":"河北省"
            },
            {
                "id":"101",
                "name":"河南省"
            },
            {
                "id":"102",
                "name":"山东省"         
            }
        ]
    -->
    <script type="text/html" id='tpl1'>
            <option>请选择省份</option>
            {{each provinces}}
                <option value="{{$value.id}}">{{$value.name}}</option>
            {{/each}}
    </script>

    <!-- 城市的模版 -->
    <script type="text/html" id='tpl1'>
            <option>请选择城市</option>
            {{each citys}}
                <option value="{{$value.id}}">{{$value.name}}</option>
            {{/each}}
    </script>

    <!-- 区/县的模版 -->
    <script type="text/html" id='tpl1'>
            <option>请选择区/县</option>
            {{each areas}}
                <option value="{{$value.id}}">{{$value.name}}</option>
            {{/each}}
    </script>

    <script>
        // 从服务端获取数据
        const provinceObj = document.querySelector("#provinces");
        const cityObj = document.querySelector("#citys");
        const areaObj = document.querySelector("#areas");

        // 发送ajax请求
        ajax({
            type: 'GET',
            url: 'http://120.78.190.136:8080/spboot/provinces',
            success: function (data) {
                if (data.length != 0) {
                    // 渲染数据
                    /* 
                        data参数：模板需要的是对象，但是后端返回的是字符串。所以就没法显示了。
                        解决办法：通过JSON.parse(data) 转换为JSON数组格式对象
        
                     */
                    const options = template('tpl1', { provinces: JSON.parse(data) });
                    provinceObj.innerHTML = options;
                }
            }
        })

        /* 
            给省份和城市绑定change事件
        */
        provinceObj.onchange = function () {
            const pid = this.value;
            // 通过pid加载城市
            ajax({
                type: 'GET',
                url: 'http://120.78.190.136:8080/spboot/provinces',
                data: {
                    id: pid
                },
                success: function (data) {
                    if (data.length > 0) {
                        // 渲染模版
                        const options = template('tpl2', { citys: JSON.parse(data) });
                        cityObj.innerHTML = options;
                    }
                }
            })
        }

        /* 
           给省份和城市绑定change事件
       */
        cityObj.onchange = function () {
            const cid = this.value;
            // 通过pid加载城市
            ajax({
                type: 'GET',
                url: 'http://120.78.190.136:8080/spboot/cities',
                data: {
                    id: cid
                },
                success: function (data) {
                    if (data.length > 0) {
                        // 渲染模版
                        const options = template('tpl3', { areas: JSON.parse(data) });
                        areaObj.innerHTML = options;
                    } else {
                        //当没有数据返回的时候，需要清空数据，重新渲染模版就好了
                        const options = template('tpl3', { areas: null })
                        areaObj.innerHTML = options;
                    }
                }
            })
        }
    </script>
</body>

</html>